<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>会员列表</title>
		<link rel="stylesheet" href="layui/css/layui.css">
		<link rel="stylesheet" href="./css/menber.css">
		<style type="text/css">
			.layui-table-cell {
				height: 50px;
				line-height: 50px;
			}
			
			.layui-table-page {
				background: white;
			}
		</style>
	</head>

	<body>
		<div id="backstage" class="layui-layout layui-layout-admin">
			<union-header :header="header"></union-header>
			<uniocn-side :side="side"></uniocn-side>
			<div class="layui-body">
				<!-- 内容主体区域 -->
				<div class="finance-com">
					<div class="finance-title" style="background: #fff;padding-bottom: 0;border-bottom: 1px solid #1AB394">
						<button class="layui-btn layui-btn-ms">会员列表</button>
					</div>

					<div class="manageb">
						<form class="layui-form">
							<div class="layui-input-inline" style="width: 100px;font-size: 14px;">
								<select name="interest" lay-filter="aihao">
									<option value="" selected=""></option>
									<option value="0">手机号</option>
									<option value="1">会员名称</option>
								</select>
							</div>

							<div class="layui-input-inline">
								<input type="text" name="keyword" placeholder="请输入搜索内容" class="layui-input" style="font-size: 14px;">
							</div>

							<div class="layui-input-inline">
								<button class="layui-btn layui-btn-normal" lay-submit lay-filter="formDemo">搜索</button>
							</div>
						</form>
					</div>

					<div class="table">
						<table class="layui-hide" id="demo" lay-filter="demo"></table>
						<script type="text/html" id="barDemo">
							<a class="layui-btn layui-btn-danger layui-btn-sm recharge" lay-event="delect">删除</a>
						</script>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script src="layui/layui.js"></script>
	<script src="js/jquery-3.2.1.min.js"></script>
	<script src="./js/vue2.5.16.js"></script>
	<script src="./js/public.js"></script>
	<script src="js/data.js"></script>
	<script>
		new Vue({
			el:"#backstage",
			data:{
                header: data.header,
                side:data.side,
			}
		})
		
		layui.use(['layer', 'table','form'], function() {
				layer = layui.layer,
				table = layui.table,
				form = layui.form;

			//搜索
			form.on('submit(formDemo)', function(data) {
				console.log(JSON.stringify(data.field));
				return false;
			});

			table.render({
				elem: '#demo',
				cols: [
					[ //标题栏
						{
							field: 'headimg',
							title: '会员头像',
							align: 'center',
						},
						{
							field: 'nickname',
							title: '会员昵称',
							align: 'center',
						}, {
							field: 'grade',
							title: '会员等级',
							align: 'center',
						}, {
							field: 'phone',
							title: '会员手机号',
							align: 'center',
						}, {
							field: 'volume',
							title: '成交量',
							align: 'center',
						}, {
							field: 'turnover',
							title: '成交额',
							align: 'center',
						}, {
							fixed: 'right',
							title: '操作',
							align: 'center',
							width: 400,
							toolbar: '#barDemo'
						}
					]
				],
				data: [{
					"headimg": "<img style='width: 40px;height: 40px;border-radius: 50%;' src='images/userImg.png'/>",
					"nickname": "测试昵称",
					"grade": "普通会员",
					"phone": "13000000000",
					"volume": "0",
					"turnover": "0.00"
				}, {
					"headimg": "<img style='width: 40px;height: 40px;border-radius: 50%;' src='images/userImg.png'/>",
					"nickname": "测试昵称",
					"grade": "普通会员",
					"phone": "13000000000",
					"volume": "0",
					"turnover": "0.00"
				}, {
					"headimg": "<img style='width: 40px;height: 40px;border-radius: 50%;' src='images/userImg.png'/>",
					"nickname": "测试昵称",
					"grade": "普通会员",
					"phone": "13000000000",
					"volume": "0",
					"turnover": "0.00"
				}],
				page: true //是否显示分页
				//,limit: 5 //每页默认显示的数量
			});

			//监听工具条
			table.on('tool(demo)', function(obj) {
				var data = obj.data;
				if(obj.event === 'delect') { //删除
					layer.confirm('确认删除吗？', function(index) {
						obj.del();
						layer.close(index);
					});
				}
			})
		});
	</script>

</html>